<template>
	<view class="homepage">
		<!-- 头部模块 -->
		<view class="homepage-head">
			<view class="head-user_avatar">
				<headimg :realSrc="personInfo.avatar"></headimg>
				<!-- <image :src="personInfo.avatar ? personInfo.avatar : defimg"></image> -->
			</view>
			<view class="head-info">
				<view class="nums">
					<view class="head-bean" @tap="linkBean">
						<view>粉丝</view>
						<view class="num" v-if="personInfo.fans_num < 10000">{{ personInfo.fans_num }}</view>
						<view class="num" v-else>{{ personInfo.fans_num / 10000 }}w</view>
					</view>
					<view class="head-watch" @tap="linkWatch">
						<view>关注</view>
						<view class="num" v-if="personInfo.follow_num < 10000">{{ personInfo.follow_num }}</view>
						<view class="num" v-else>{{ personInfo.follow_num / 10000 }}w</view>
					</view>
					<view class="head-zan" @tap="linkZan" v-if="!user_id">
						<view>获赞</view>
						<view class="num" v-if="personInfo.start_num < 10000">{{ personInfo.start_num }}</view>
						<view class="num" v-else>{{ personInfo.start_num / 10000 }}w</view>
					</view>
					<navigator v-if="!user_id" hover-class="false" class="head-black" url="../homepage/my-blackList"><view>黑名单</view></navigator>
				</view>
				<view class="head_type" v-if="user_id">
					<view class="head_follow_cancle" v-if="personInfo.follow_state == 1" @tap="follow">取消关注</view>
					<view class="head_follow" v-else @tap="follow">关注</view>
					<view class="head_icon" @tap="operation"><i class="iconfont1 iconxiaojiantou"></i></view>
				</view>
			</view>
		</view>
		<!-- 推荐用户 -->
		<!-- <view class="recommend">
			<view class="title">
				<text>推荐用户</text><text>查看全部 ></text>
			</view>
			<scroll-view scroll-x="true">
				<view class="scroll-item">
					<image src="../../static/logo.png" mode=""></image>
					<view class="tip">你可能感兴趣的人</view>
					<view class="follow">关注</view>
				</view>
			</scroll-view>
		</view> -->
		<!-- 个人信息 -->
		<view class="homepage-title">
			<view class="title-ageg">
				<i v-if="personInfo.sex == 1" class="iconfont1 iconnan"></i>
				<i v-else class="iconfont1 iconnv"></i>
			</view>
			<view class="title-area">
				<i class="iconfont1 iconweizhi-xian"></i>
				{{ personInfo.pro }}{{ personInfo.city }}{{ personInfo.area }}
			</view>
		</view>
		<view class="homepage-write_brief" @tap="edit">
			<view class="write_cont" v-if="personInfo.autograph">{{ personInfo.autograph }}</view>
			<view class="write_none" v-else>请填写个人简介</view>
		</view>

		<!-- 选项卡 -->
		<view class="homepage-tab">
			<view class="volist-tab" v-for="(item, index) in tabList" :key="index" :class="[tabIndex == index ? 'volist-tab_active' : '']" @tap="tabClick(index)">
				{{ item }}
				<text v-if="index == 0">{{ personInfo.video_num }}</text>
				<text v-else>{{ personInfo.news_num }}</text>
			</view>
		</view>

		<!-- 视频列表模块 -->
		<univideo v-if="isVideo" :list="videoList" :status="status" :contentText="contentText" @videoDetail="videoDetail" @islike="islike" @del="del"></univideo>
		<!-- 文章列表模块 -->
		<UniArticle v-if="!isVideo" :list="list" :status="status" :contentText="contentText" @islike="islike" @del="del" :users_type="users_type"></UniArticle>
		<!-- 蒙版操作 -->
		<view class="button" v-if="isShow" @tap="closeButton">
			<view class="buttonView">
				<!-- <view class="check">发私信</view> -->
				<view class="edit" @tap="inBlack">拉黑</view>
				<!-- <view class="delete">举报</view> -->
				<view class="cancle">取消</view>
			</view>
		</view>
		<!-- 违规提示 -->
		<view class="bottom" v-if="wrongList.length > 0" @tap="closeButton">
			<view class="deleteView" v-for="(item, index) in wrongList" :key="index">
				<view class="deleteTitle">
					您发布的
					<text v-if="item.type == 1">文章</text>
					<text v-if="item.type == 2">作品</text>
					因
					<text class="reason">{{ item.set_name }}</text>
					，被判定违规，扣{{ item.points }}健康分。请尽快处理。
				</view>
				<view class="buttons">
					<text class="btn_cancle" @tap.stop="closeItem(item.dispose_id, index)">关闭</text>
					<text class="btn_yes" @tap="detail(item.article_id, item.dispose_id, item.type)">详情</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import headimg from '@/components/head_img.vue';
import util from '@/common/util.js';
import Univideo from './components/video.vue';
import UniArticle from './components/article.vue';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import provinceData from '@/components/mpvue-citypicker/city-data/province.js';
import cityData from '@/components/mpvue-citypicker/city-data/city.js';
import areaData from '@/components/mpvue-citypicker/city-data/area.js';
export default {
	components: {
		Univideo,
		UniArticle,
		uniLoadMore,
		headimg
	},
	data() {
		return {
			isVideo: true,
			tabList: ['作品', '文章'], //选项卡列表
			tabIndex: 0, //选项卡索引
			isShow: false,
			list: [], //文章列表
			page: 1,
			reload: true,
			status: 'more',
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多',
				contentnot: '没数据'
			},
			user_id: '',
			wrongList: [], //违规消息列表
			personInfo: {}, //主页信息
			videoList: [], //视频列表
			black_state: 1, //拉黑状态 0为正常，1为拉黑
			pagesize: 8,
			myId: uni.getStorageSync('userInfo').id,
			users_type: 0,
			article_type_id: -1,
			isvideopost: true,
			isarticlepost: true
		};
	},
	onNavigationBarButtonTap() {
		this.$zapi
			.apiPost('user/video.User/UserFollowAdd', {
				form_id: this.user_id
			})
			.then(res => {
				uni.showToast({
					title: res.data.msg,
					icon: 'none'
				});
				if (res.data.code == 200) {
					// #ifdef APP-PLUS
					var webView = this.$mp.page.$getAppWebview();
					webView.setTitleNViewButtonStyle(0, {
						text: '\ue652',
						color: '#FF9900'
					});
					// #endif
				}
				this.getPerson();
			});
	},
	/* 屏幕移动到一定距离如果没有关注，则出现关注图标 */
	onPageScroll: function(e) {
		// #ifdef APP-PLUS
		var webView = this.$mp.page.$getAppWebview();
		// #endif
		if (e.scrollTop >= 100) {
			// #ifdef APP-PLUS
			if (this.user_id && this.personInfo.follow_state != 1) {
				webView.setTitleNViewButtonStyle(0, {
					text: '\ue652',
					color: '#FFFFFF'
				});
			}
			// #endif
		} else {
			// #ifdef APP-PLUS
			if (this.user_id && this.personInfo.follow_state != 1) {
				webView.setTitleNViewButtonStyle(0, {
					text: '\ue652',
					color: '#FF9900'
				});
			}
			// #endif
		}
	},
	onPullDownRefresh() {
		this.reload = true;
		this.page = 1;
		if (this.tabIndex == 1) {
			this.getList();
		} else {
			this.getVideo();
		}
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onReachBottom() {
		this.status = 'loading';
		this.page = this.videoList.length > 0 || this.list.length > 0 ? (this.page += 1) : this.page;
		var _this = this;
		setTimeout(function() {
			if (_this.tabIndex == 1) {
				_this.getList();
			} else {
				_this.getVideo();
			}
		}, 500);
	},
	onLoad(e) {
		this.user_id = e.user_id;
		this.users_type = e.users_type;
		if (e.article_type_id) {
			this.article_type_id = e.article_type_id;
		}
	},
	onShow() {
		this.page = this.videoList.length > 0 || this.list.length > 0 ? (this.page += 1) : this.page;
		if (this.user_id && this.user_id != this.myId) {
			this.getBlack();
		} else {
			this.black_state = 0;
			this.getWrong();
			this.getPerson();
		}
	},
	methods: {
		/* 获取黑名单状态 */
		getBlack() {
			this.$zapi
				.apiPost('user/video.User/UserBlackState', {
					form_id: this.user_id
				})
				.then(res => {
					if (res.data.code == 200) {
						this.black_state = res.data.data.black_state;
						if (this.black_state == 0) {
							this.getWrong();
							this.getPerson();
						} else {
							uni.showModal({
								title: '提示',
								content: '对方处于您的黑名单中，无法查看对方任何信息',
								showCancel: false,
								confirmColor: '#FF9900',
								success: function(res) {
									if (res.confirm) {
										uni.navigateBack({
											delta: 2
										});
									}
								}
							});
						}
					}
				});
		},
		/* 获取个人信息 */
		getPerson() {
			var url = '';
			var data = {};
			if (this.user_id && this.user_id != this.myId) {
				url = 'user/video.User/UserHomeByFrom';
				data.form_id = this.user_id;
			} else {
				url = 'user/video.User/UserHomePage';
			}
			this.$zapi.apiPost(url, data).then(res => {
				if (res.data.code == 200) {
					this.personInfo = res.data.data;
					var index1 = 0; //省的索引
					for (var i = 0; i < provinceData.length; i++) {
						if (provinceData[i].value == this.personInfo.provinec_id) {
							this.personInfo.pro = provinceData[i].label;
							index1 = i;
						}
					}
					var index2 = 0; // 市的索引
					for (var i = 0; i < cityData[index1].length; i++) {
						if (cityData[index1][i].value == this.personInfo.city_id) {
							this.personInfo.city = cityData[index1][i].label;
							index2 = i;
						}
					}
					for (var i = 0; i < areaData[index1][index2].length; i++) {
						if (areaData[index1][index2][i].value == this.personInfo.area_id) {
							this.personInfo.area = areaData[index1][index2][i].label;
						}
					}

					uni.setNavigationBarTitle({
						title: this.personInfo.nicheng
					});
					this.reload = true;
					this.page = 1;
					this.videoList = [];
					this.list = [];
					this.getList();
					this.getVideo();
				} else {
					this.personInfo = {};
				}
			});
		},
		/* 获取违规推送消息 */
		getWrong() {
			this.$zapi.apiPost('user/article.Users/punishList').then(res => {
				if (res.data.code == 200) {
					this.wrongList = res.data.data;
				} else {
					this.wrongList = [];
				}
			});
		},
		/* 关闭当前违规提示 */
		closeItem(dispose_id) {
			this.$zapi
				.apiPost('user/article.Users/punishLook', {
					dispose_id: dispose_id
				})
				.then(res => {
					if (res.data.code == 200) {
						this.getWrong();
					}
				});
		},
		/* 查看违规详情 */
		detail(article_id, dispose_id, type) {
			this.closeItem(dispose_id);
			this.isShow = false;
			uni.navigateTo({
				url: '../complain/be-reported?article_id=' + article_id + '&type=' + type
			});
		},
		/* 关注 & 取消关注 */
		follow() {
			var url = '';
			if (this.personInfo.follow_state == 1) {
				url = 'user/video.User/UserFollowDel';
			} else {
				url = 'user/video.User/UserFollowAdd';
			}
			this.$zapi
				.apiPost(url, {
					form_id: this.user_id
				})
				.then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
					this.getPerson();
				});
		},
		/* 切换tab */
		tabClick(index) {
			this.tabIndex = index;
			this.page = 1;
			this.reload = true;
			this.videoList = [];
			this.list = [];
			if (index == 0) {
				this.isVideo = true;
				if (this.black_state == 0) {
					this.getVideo();
				}
			} else if (index == 1) {
				this.isVideo = false;
				if (this.black_state == 0) {
					this.getList();
				}
			}
		},
		/* 获取作品列表 */
		getVideo() {
			if (this.isvideopost) {
				this.isvideopost = false;
				var data = {
					page: this.page,
					pagesize: this.pagesize
				};
				var url = '';
				if (this.user_id && this.user_id != this.myId) {
					data.form_id = this.user_id;
					url = 'user/video.Lists/VideoListByForm';
				} else {
					url = 'user/video.Lists/VideoListByOne';
				}
				this.$zapi.apiPost(url, data).then(res => {
					if (res.data.code == 200) {
						var list = res.data.data.data;
						this.videoList = this.reload ? list : this.videoList.concat(list);
						this.reload = false;
						this.status = 'more';
						this.isvideopost = true;
					} else {
						if (this.list.length == 0) {
							this.page = this.page == 1 ? this.page : (this.page -= 1);
						}
						if (this.reload) {
							this.videoList = [];
						} else {
							this.status = 'noMore';
						}
						this.isvideopost = true;
					}
				});
			}
		},
		/* 查看视频详情 */
		videoDetail(index) {
			if (this.user_id && this.user_id != this.myId) {
				uni.navigateTo({
					url: '../topic/videoDetail?index=' + index + '&pagesize=' + this.pagesize + '&type=2' + '&user_id=' + this.user_id
				});
			} else {
				uni.navigateTo({
					url: '../topic/videoDetail?index=' + index + '&pagesize=' + this.pagesize + '&type=3'
				});
			}
		},
		/* 获取文章列表 */
		getList() {
			if (this.isarticlepost) {
				this.isarticlepost = false;
			var data = {
				page: this.page,
				pagesize: 7
			};
			let url = 'user/article.Lists/articleList';
			if (this.users_type && this.users_type > 0) {
				data.users_type = this.users_type;
			}
			if (this.article_type_id > -1) {
				data.article_type_id = this.article_type_id;
				url = 'user/wisdom.Lists/articleList';
			}
			if (this.user_id && this.user_id != this.myId) {
				data.user_id = this.user_id;
				data.is_check = 2;
			} else {
				data.is_user = 1;
			}
			this.$zapi.apiPost(url, data).then(res => {
				if (res.data.code == 200) {
					var list = res.data.data.data;
					for (var i = 0; i < list.length; i++) {
						list[i].time = util.getLeftTime(list[i].creat_time);
						list[i].content = list[i].content.replace(/&lt;videoSrc=/g, '<video src="');
						list[i].content = list[i].content.replace(/video&gt;/g, '"autoplay="true" loop="true" show-center-play-btn="true" show-play-btn="false"></video>');
						list[i].content = list[i].content.replace(/src=/g, 'style="max-width:100%;" src=');
						if (list[i].subhead_creat_time) {
							list[i].ftime = util.getLeftTime(list[i].subhead_creat_time);
						}
					}
					this.list = this.reload ? list : this.list.concat(list);
					this.reload = false;
					this.status = 'more';
					this.isarticlepost = true;
				} else {
					if (this.page == 1) {
						this.personInfo.news_num = 0;
					}
					this.page = this.page == 1 ? this.page : (this.page -= 1);
					if (this.reload) {
						this.list = [];
					} else {
						this.status = 'noMore';
					}
					this.isarticlepost = true;
				}
			});}
		},
		/* 操作展开 & 收起 */
		operation() {
			this.isShow = !this.isShow;
		},
		/* 关闭弹窗 */
		closeButton() {
			this.isShow = false;
		},
		/* 跳转粉丝 */
		linkBean() {
			if (this.user_id) {
				uni.navigateTo({
					url: '../homepage/my-bean?user_id=' + this.user_id
				});
			} else {
				uni.navigateTo({
					url: '../homepage/my-bean'
				});
			}
		},
		/* 跳转关注 */
		linkWatch() {
			if (this.user_id) {
				uni.navigateTo({
					url: '../homepage/my-watch?user_id=' + this.user_id
				});
			} else {
				uni.navigateTo({
					url: '../homepage/my-watch'
				});
			}
		},
		/* 跳转赞*/
		linkZan() {
			if (this.user_id) {
				uni.navigateTo({
					url: '../homepage/my-zan?user_id=' + this.user_id
				});
			} else {
				uni.navigateTo({
					url: '../homepage/my-zan'
				});
			}
		},
		/* 跳转修改简介 */
		edit() {
			if (!this.user_id) {
				uni.navigateTo({
					url: 'edit?text=' + this.personInfo.autograph
				});
			}
		},
		/* 加入黑名单 */
		inBlack() {
			this.$zapi
				.apiPost('user/video.User/BlackAdd', {
					form_id: this.user_id
				})
				.then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
					if (res.data.code == 200) {
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1000);
					}
				});
		},
		/* 点赞 */
		islike(data) {
			var type = data.type; // 0视频列表 1文章列表
			var index = data.index;
			var is_like = data.is_like;
			if (type == 0) {
				if (is_like == 2) {
					this.videoList[index].is_like = 0;
					this.videoList[index].likenum--;
					this.personInfo.start_num--;
				} else {
					this.videoList[index].is_like = 2;
					this.videoList[index].likenum++;
					this.personInfo.start_num++;
				}
			} else {
				if (is_like == 2) {
					this.list[index].is_like = 0;
					this.list[index].likenum--;
					this.personInfo.start_num--;
				} else {
					this.list[index].is_like = 2;
					this.list[index].likenum++;
					this.personInfo.start_num++;
				}
			}
		},
		/* 文章 & 视频数量删除 */
		del(type) {
			if (type == 1) {
				this.personInfo.news_num--;
			} else {
				this.personInfo.video_num--;
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f3f3f3;
}

// 头部
.homepage-head {
	display: flex;
	justify-content: flex-start;
	padding: 28upx 20upx;
	align-items: center;
	background-image: linear-gradient(#ff9900, #ff9900);
	background-size: 100%;

	view {
		color: #ffffff;
		text-align: center;
	}

	// 头像
	.head-user_avatar {
		font-size: 0;
		margin-right: 40upx;

		// image,
		.head_image {
			width: 120upx;
			height: 120upx;
			border-radius: 50%;
			border: 2px solid #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.head-info {
		width: 100%;

		.nums {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100%;

			.num {
				font-size: 34upx;
			}
		}

		.head_type {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.head_follow {
				background: #ffffff;
				width: 420upx;
				height: 60upx;
				color: #ff9900;
				border-radius: 30upx;
			}

			.head_icon {
				background: #ffffff;
				width: 60upx;
				height: 60upx;
				line-height: 60upx;
				border-radius: 30upx;

				.iconxiaojiantou {
					color: #ff9900;
				}
			}

			.head_follow_cancle {
				width: 420upx;
				height: 60upx;
				line-height: 60upx;
				color: #ffffff;
				border-radius: 30upx;
				border: 2upx solid #ffffff;
			}

			// .head_follow_yes{
			// 	background: #FFFFFF;
			// 	width: 196upx;
			// 	height: 60upx;
			// 	line-height: 60upx;
			// 	color: #FF9900;
			// 	border-radius: 30upx;
			// }
		}
	}
}

// 推荐用户
.recommend {
	width: 690upx;
	margin: 30upx auto;
	color: #999999;
	font-size: 26upx;

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.scroll-item {
		width: 220upx;
		height: 290upx;
		background: #ffffff;
		border-radius: 20upx;

		.tip {
			color: #999999;
			font-size: 26upx;
			text-align: center;
		}

		.follow {
			background: #ff9900;
			color: #ffffff;
			border-radius: 30upx;
			width: 144upx;
			height: 44upx;
			line-height: 44upx;
			text-align: center;
			margin-left: 38upx;
		}
	}
}

.scroll-item image {
	width: 120upx;
	height: 120upx;
	margin: 30upx 50upx 0;
}

// 标签
.homepage-title {
	display: flex;
	padding: 30upx 20upx;
	background: #ffffff;

	.title-ageg,
	.title-area {
		margin-right: 10upx;
		padding: 0 20upx;
		border-radius: 24upx;
		background: #f3f3f3;
		line-height: 1;
		color: #666666;
		font-size: 26upx;
		display: flex;
		align-items: center;
	}

	.iconnan {
		color: #00acfe;
	}

	.iconnv {
		color: #fc3ca9;
	}

	.iconweizhi-xian {
		color: #999999;
		margin-right: 10upx;
	}
}

// 个人简介
.homepage-write_brief {
	background: #ffff;
	padding: 10px 20px;
}

.write_cont {
	color: #666666;
	font-size: 26upx;
}

.write_none {
	color: #cccccc;
	font-size: 26upx;
}

// tabs选项卡
.homepage-tab {
	display: flex;
	padding-top: 10px;
	justify-content: space-around;
	background: #fff;

	.volist-tab {
		position: relative;
		padding-bottom: 20upx;
		font-size: 32upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	// 作品
	.volist-tab_active {
		color: #ff9900;
	}

	// 增加下划线
	.volist-tab_active:before {
		position: absolute;
		content: '';
		width: 36upx;
		height: 4upx;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		background: #ff9900;
	}

	// 文章
	.volist-tab2 {
	}
}

/* 底部弹窗 */
.button {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, 0.4);
}

.buttonView {
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: #f6f6f6;
	border-radius: 42upx 42upx 0 0;
}

.buttonView view {
	height: 90upx;
	line-height: 90upx;
	text-align: center;
	font-size: 30upx;
	color: #333333;
	background: #ffffff;
	border-top: 2upx solid #f6f6f6;
}

.buttonView view:first-child {
	border-radius: 40upx 40upx 0 0;
	border: none;
}

.cancle {
	margin-top: 30upx;
	border: none;
}

/* 违规弹窗 */
.bottom {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, 0.4);
}

.deleteView {
	position: fixed;
	width: 422upx;
	top: calc(50% - 200upx);
	left: calc(50% - 211upx);
	background-color: #ffffff;
	border-radius: 20upx;
}

.deleteTitle {
	color: #333333;
	font-size: 36upx;
	padding: 40upx;
	line-height: 1.4;
}

.deleteTitle text {
	display: inline;
}

.deleteTitle .reason {
	color: #999999;
	font-size: 36upx;
}

.buttons {
	display: flex;
	justify-content: space-between;
	padding: 0 40upx 40upx;
}

.btn_cancle {
	color: #999999;
	font-size: 36upx;
}

.btn_yes {
	color: #ff9900;
	font-size: 36upx;
}
</style>
